<template>
  <div class="wrap" v-loading="loading">
    <div class="title">
      <img src="../../images/main/mine.png" alt> 用户
    </div>
    <div class="sel">
      <div class="txt">关键词：</div>
      <input type="text" placeholder="用户名/手机号" v-model="params.keyWord">
      <div class="btn" @click="getUserList()">搜索</div>
    </div>
    <div class="clear"></div>
    <div class="table">
      <div class="sthead">
        <div>编号</div>
        <div>用户名称</div>
        <div>手机号</div>
        <div>注册时间</div>
      </div>
      <div class="tlists">
        <div  class="tlist" v-if="userList.length == 0"><div style="text-align:center;">暂无数据</div></div>
        <div class="tlist" v-else v-for="(item,index) in userList" :key="index">
          <div>{{index + 1}}</div>
          <div>{{item.nickName}}</div>
          <div>{{item.userPhone}}</div>
          <div class="zctime">{{setDate(item.registerTime)}} {{setTime(item.registerTime)}}</div>
        </div>

      </div>
    </div>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :page-size="params.limit"
      :total="params.total"
      style="text-align:center;margin:20px auto;"
      layout="total,prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
      loading: false,
      params: {
        limit: 10,
        page: 1,
        serviceId: this.$store.state.userId,
        keyWord: "",
        total: 0
      },
      userList: []
    };
  },
  methods: {
    /**
     * 分页
     */
    handleCurrentChange: function(index) {
      let that = this;
      that.params.page = index;
      that.getUserList();
    },
    /**
     * 获取用户列表
     */
    getUserList: function() {
      let that = this;
      this.loading = true;
      this.axios({
        method: "post",
        url: `/user/selectByKyWord`,
        data: qs.stringify(that.params)
      }).then(res => {
        this.loading = false;
        if (res.data.code == 0) {
          that.userList = res.data.data;
          that.params.total = res.data.data.length
        } else {
          this.$alert(res.data.msg); 
        }
      });
    },
    /**
     * 根据时间毫秒数 返回年月日
     */
    setDate: function(str) {
      let times = new Date(str);
      return `${times.getFullYear()}-${
        times.getMonth()+1 < 10 ? "0" + (times.getMonth()+1) : times.getMonth()+1
      }-${times.getDate() < 10 ? "0" + times.getDate() : times.getDate()}`;
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function(str) {
      let times = new Date(str);
      return `${
        times.getHours() < 10 ? "0" + times.getHours() : times.getHours()
      }:${
        times.getMinutes() < 10 ? "0" + times.getMinutes() : times.getMinutes()
      }:${
        times.getSeconds() < 10 ? "0" + times.getSeconds() : times.getSeconds()
      }`;
    }
  },
  mounted() {
    this.getUserList();
  }
};
</script>
<style scoped>
.tasker {
  width: 400px;
  height: 400px;
  padding: 10px;
  display: none;
}
.wrap {
  /* padding: 68px 136px; */
  width: 90%;
  margin: 40px auto;
}
.title {
  height: 33px;
  line-height: 33px;
  font-size: 24px;
  font-family: PingFangSC-Medium;
  font-weight: bold;
}
.title img {
  width: 28px;
  height: 26px;
  float: left;
  padding-top: 5px;
  margin-right: 10px;
}
.screen {
  width: 1490px;
  height: 60px;
  background: #f6f6f6;
  margin-left: 38px;
  margin-top: 24px;
  line-height: 60px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #888888;
}
.screen img {
  float: left;
  width: 27px;
  height: 27px;
  margin-left: 10px;
  margin-top: 16px;
  margin-right: 18px;
}
.sel {
  margin-top: 27px;
  padding-left: 38px;
  height: 40px;
  line-height: 40px;
}
.sel .txt {
  float: left;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #000000;
  font-weight: bold;
  width: 73px;
}
.sel input {
  float: left;
  background: #ffffff;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  width: 317px;
  height: 40px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #888888;
  margin-left: 17px;
  text-align: center;
  box-sizing: border-box;
}
.btn {
  float: left;
  color: #fff;
  background: #085dab;
  border: 1px solid #085dab;
  width: 140px;
  height: 38px;
  text-align: center;
  margin-left: 37px;
  cursor: pointer;
}
.table {
  /* width: 1490px; */
  margin-top: 43px;
  margin-left: 38px;
}
.table .sthead {
  /* width: 1490px; */
  border-bottom: 1px solid #dddddd;
  height: 67px;
  font-family: PingFangSC-Medium;
  font-size: 20px;
  color: #000000;
  line-height: 67px;
  font-weight: bold;
  background: #e0eefe;
}
.sthead {
  /* width: 1490px; */
  border: 1px solid #ddd;
  border-width: 1px 0px 1px 1px;
  height: 67px;
  background: #e0eefe;
  line-height: 67xp;
  display: flex;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.sthead > div {
  flex: 1;
  height: 67px;
  border-right: 1px solid #ddd;
  text-align: center;
}
.tlist {
  /* width: 1490px; */
  height: 80px;
  display: flex;
  line-height: 80px;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
}
.tlist > div {
  flex: 1;
  height: 80px;
  border-right: 1px solid #ddd;
  text-align: center;
}
</style>
